<!DOCTYPE html>
<!--
 * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
  <head>
<!--     <script src="imageinfo/binaryajax.js"></script> -->
<!--     <script src="imageinfo/imageinfo.js" ></script> -->
<!--     <script src="imageinfo/exif.js" ></script> -->
    <style>
      body {
        font: 14px Arial;
      }

      h1 {
        margin: 30px 0 5px 0;
        padding: 0;
      }
      code {
        padding: 0;
        margin: 5px 0;
        display: block;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        margin: 15px 0;
      }
      td, th {
        padding: 4px;
      }
      th {
        text-align: left;
        width: 130px;
      }
      tr {
        display: none;
      }
      tr.rendered {
        display: block;
      }
      tr.rendered:nth-child(odd) {
        background: #eee;
      }
      #thumbnail {
        position: fixed;
        right: 20px;
        top: 20px;
        -webkit-box-shadow: 1px 1px 6px #000;
        border: 4px solid #fff;
        background: #fff;
      }
      #loader {
        font: 30px Arial;
        text-align: center;
        padding: 100px;
      }
    </style>
    <script>
//       /**
//        * Quick template rendering function.  For each cell passed to it, check
//        * to see if the cell's text content is a key in the supplied data array.
//        * If yes, replace the cell's contents with the corresponding value and
//        * unhide the cell.  If no, then remove the cell's parent (tr) from the
//        * DOM.
//        */
//       function renderCells(cells, data) {
//         for (var i = 0; i < cells.length; i++) {
//           var cell = cells[i];
//           var key = cell.innerText;
//           if (data[key]) {
//             cell.innerText = data[key];
//             cell.parentElement.className = "rendered";
//           } else {
//             cell.parentElement.parentElement.removeChild(cell.parentElement);
//           }
//         }
//       };

//       /**
//        * Returns true if the supplies object has no properties.
//        */
//       function isEmpty(obj) {
//         for (var key in obj) {
//           if (obj.hasOwnProperty(key)) {
//             return false;
//           }
//         }
//         return true;
//       };

//       /**
//        * Resizes the window to the current dimensions of this page's body.
//        */
//       function resizeWindow() {
//         window.setTimeout(function() {
//           chrome.tabs.getCurrent(function (tab) {
//             var newHeight = Math.min(document.body.offsetHeight + 140, 700);
//             chrome.windows.update(tab.windowId, {
//               height: newHeight,
//               width: 520
//             });
//           });
//         }, 150);
//       };

//       /**
//        * Called directly by the background page with information about the
//        * image.  Outputs image data to the DOM.
//        */
//       function renderImageInfo(imageinfo) {
//         console.log('imageinfo', imageinfo);

//         var divloader = document.querySelector('#loader');
//         var divoutput = document.querySelector('#output');
//         divloader.style.display = "none";
//         divoutput.style.display = "block";

//         var divinfo = document.querySelector('#info');
//         var divexif = document.querySelector('#exif');

        Render general image data.
//         var datacells = divinfo.querySelectorAll('td');
//         renderCells(datacells, imageinfo);

        If EXIF data exists, unhide the EXIF table and render.
//         if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
//           divexif.style.display = 'block';
//           var exifcells = divexif.querySelectorAll('td');
//           renderCells(exifcells, imageinfo['exif']);
//         }
//       };

//       /**
//        * Renders the URL for the image, trimming if the length is too long.
//        */
//       function renderUrl(url) {
//         var divurl = document.querySelector('#url');
//         var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
//         var anchor = document.createElement('a');
//         anchor.href = url;
//         anchor.innerText = urltext;
//         divurl.appendChild(anchor);
//       };

//       /**
//        * Renders a thumbnail view of the image.
//        */
//       function renderThumbnail(url) {
//         var canvas = document.querySelector('#thumbnail');
//         var context = canvas.getContext('2d');

//         canvas.width = 100;
//         canvas.height = 100;

//         var image = new Image();
//         image.addEventListener('load', function() {
//           var src_w = image.width;
//           var src_h = image.height;
//           var new_w = canvas.width;
//           var new_h = canvas.height;
//           var ratio = src_w / src_h;
//           if (src_w > src_h) {
//             new_h /= ratio;
//           } else {
//             new_w *= ratio;
//           }
//           canvas.width = new_w;
//           canvas.height = new_h;
//           context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
//         });
//         image.src = url;
//       };

//       /**
//        * Returns a function which will handle displaying information about the
//        * image once the ImageInfo class has finished loading.
//        */
//       function getImageInfoHandler(url) {
//         return function() {
//           renderUrl(url);
//           renderThumbnail(url);
//           var imageinfo = ImageInfo.getAllFields(url);
//           renderImageInfo(imageinfo);
//           resizeWindow();
//         };
//       };
    </script>
  </head>
  <body>
    <div id="loader">
      Loading... <img src="loader.gif" />
    </div>
    <div id="output" style="display:none">
      <div id="info">
        <h1>Image Information</h1>
        <code id="url"></code>
        <canvas id="thumbnail"></canvas>
        <table>
          <tr>
            <th>Format</th>
            <td>format</td>
          </tr>
          <tr>
            <th>Version</th>
            <td>version</td>
          </tr>
          <tr>
            <th>Width</th>
            <td>width</td>
          </tr>
          <tr>
            <th>Height</th>
            <td>height</td>
          </tr>
          <tr>
            <th>Mime Type</th>
            <td>mimeType</td>
          </tr>
          <tr>
            <th>Size (Bytes)</th>
            <td>byteSize</td>
          </tr>
        </table>
      </div>
      <div id="exif" style="display:none;">
        <h2>EXIF Information</h2>
        <table>
          <tr>
            <th>Date</th>
            <td>DateTime</td>
          </tr>
          <tr>
            <th>Aperture</th>
            <td>ApertureValue</td>
          </tr>
          <tr>
            <th>Exposure</th>
            <td>ExposureTime</td>
          </tr>
          <tr>
            <th>Shutter Speed</th>
            <td>ShutterSpeedValue</td>
          </tr>
          <tr>
            <th>ISO</th>
            <td>ISOSpeedRatings</td>
          </tr>
          <tr>
            <th>Camera Make</th>
            <td>Make</td>
          </tr>
          <tr>
            <th>Camera Model</th>
            <td>Model</td>
          </tr>
          <tr>
            <th>Software</th>
            <td>Software</td>
          </tr>
          <tr>
            <th>XResolution</th>
            <td>XResolution</td>
          </tr>
          <tr>
            <th>YResolution</th>
            <td>YResolution</td>
          </tr>
          <tr>
            <th>Flash</th>
            <td>Flash</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
      // The URL of the image to load is passed on the URL fragment.
      var imageUrl = window.location.hash.substring(1);
      if (imageUrl) {
    	  alert(imageUrl);
        // Use the ImageInfo library to load the image and parse it.
//         ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl));
      }
    </script>
  </body>
</html>